<template>
	<view class="flex flex-wrap">
		<view class="list-item  rounded border pb-1 mt-2" v-for="(item, index) in list" :key="index"
		:class="[tiltIndex===index?'border-info shadow':'bg-white']"
		style="margin-left: 15rpx;border-width: 3rpx;" 
		@click="clickTilt(index, item.imei)">
			<view class="flex flex-column ml-1 mt-2">
				<view class="flex text-dark align-center">
					<text class="font font-weight-bold">{{item.imei}}</text>
					<image v-if="!item.online" class="ml-3" src="../../static/imgs/info.jpg" style="width: 25rpx;height: 25rpx;"></image>
					<image v-else class="ml-3" src="../../static/imgs/on_line.png" style="width: 25rpx;height: 25rpx;"></image>
				</view>
				<view class="text-dark flex justify-between">
					<view class="">
						<text class="font-sm">压力：</text>
						<text class="font-sm">{{item.adc}}</text>
					</view>
					<view class="mr-2">
						<text class="font-sm">角度：</text>
						<text class="font-sm">{{item.gear}}</text>
					</view>
				</view>
				<view class="text-dark">
					<text class="font-sm">降雨量：</text>
					<text class="font-sm">0</text>
				</view>
				<view class="text-dark">
					<text class="font-sm">经度：</text>
					<text class="font-sm">{{item.lng}}</text>
				</view>
				<view class="text-dark">
					<text class="font-sm">纬度：</text>
					<text class="font-sm">{{item.lat}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				tiltIndex: -1
			}
		},
		computed: {
			
		},
		filters: {
			gearFilter(val) {
				if (val === 0) return 0;
				else if (val === 1) return 15
				else if (val === 2) return 20
				else if (val === 3) return 25
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: '/pages/'+url,
				});
			},
			clickTilt(index, imei) {
				if (this.tiltIndex === index) return
				this.tiltIndex = index;
				
				this.$emit('click', {index, imei})
			}
		}, // end methods
	}
</script>

<style scoped>
.list-item{
	width: 350rpx;
	/* height: 181rpx; */
	/* padding: 5rpx; */
	box-sizing: border-box;
	position: relative;
}
</style>
